<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .item {
        background-color: brown;
    }
</style>

<body>
    <ul>
        <li class="item">1112111</li>
        <li>2222222</li>
        <li>3333333</li>
        <li>4444444</li>
        <li>5555555</li>
        <li>6666666</li>
    </ul>
    <script>
        let lis = document.querySelectorAll("li")
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                // console.log(this);
                // console.log(this.innerText);
                // if (this.style.backgroundColor == "red") {
                //     this.style.backgroundColor = ""
                // } else {
                //     this.style.backgroundColor = "red"
                // }
                // for (let j = 0; j < lis.length; j++) {
                //     lis[j].classList.remove("item")

                // }
                document.querySelector(".item").className = ""
                this.classList.add("item")
                // lis[i].classList.remove()
                // this.onclick = function(){
                // }

            }

        }
    </script>


</body>

</html>